<template>
  <div class="finance">
    <!-- 表单头部 -->
    <div class="up_fin">
      <div class="total">
        <p>账户总额</p>
        <p>{{ hcc }}元</p>
        <el-button type="primary">提现</el-button>
      </div>
      <div class="Withdrawal">
        <p>提现中</p>
        <p>{{ account }}元</p>
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="down_fin">
      <!-- 内容tab切换 -->
      <div class="header">
        <ul class="tab-tilte">
          <div @click="cur = 0" :class="{ active: cur == 0 }">体现记录</div>
          <div @click="cur = 1" :class="{ active: cur == 1 }">收支明细</div>
        </ul>
      </div>
      <!-- 数据展示 -->
      <!-- v-for="(item,index) in ddd" -->
      <div class="section" v-show="cur == 0">
        <el-table
          :data="tableData"
          
        >
          <el-table-column
            label="序号"
            width="180"
            style="width: 100%"
            type="index"
            :index="indexMethod"
          >
          </el-table-column>
          <el-table-column prop="shijian" label="结算周期" width="180">
          </el-table-column>
          <el-table-column prop="dingdanfenyong" label="结算类型">
          </el-table-column>
          <el-table-column prop="jiage" label="结算金额"> </el-table-column>
          <el-table-column prop="dingdanhao" label="订单号"> </el-table-column>
          <el-table-column prop="shuoming" label="说明"> </el-table-column>
        </el-table>
      </div>
      <div class="section" v-show="cur == 1">
        <el-table :data="tableData" style="width: 100%" @row-click="handdle"
          :row-class-name="tableRowClassName">
          <el-table-column prop="dingdanshuliang" label="序号" width="180" type="index"
            :index="indexMethod">
          </el-table-column>
          <el-table-column prop="shijian" label="提现日期" width="180">
          </el-table-column>
          <el-table-column prop="dingdanfenyong" label="提现方式">
          </el-table-column>
          <el-table-column prop="jiage" label="提现金额"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cur: 0,
      tableData: [],
      account: "",
      sum: "",
      cishu: "",
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    handdle(row, event, column) {
      var index = row.index;
      console.log(index);
      this.account = this.tableData[index].jiage;
    },
    indexMethod(index) {
      return index++;
    },
  },
  created() {
    this.$axios
      .get("http://10.0.31.157:8888/dingdanguanli?name=1")
      .then((res) => {
        let data = res.data;
        data.map((res) => {
          this.tableData.push(res);
        });
      });
  },
  beforeMount() {},
  computed: {
    hcc() {
      let cishu = 0;
      this.tableData.map((res) => {
        // console.log(res.jiage);
        cishu += +res.jiage;
      });
      return cishu;
    },
  },
};
</script>

<style lang="scss" scoped>
.finance {
  width: 100%;
  height: 100%;
  .up_fin {
    width: auto;
    height: 210px;
    border: black 1px solid;
    // background-color: pink;
    .total {
      width: 100px;
      // height: 210px;
      font-size: 20px;
      font-weight: 900;
      margin-left: 20px;
      float: left;
      p:nth-child(1) {
        margin-bottom: 40px;
      }
      p:nth-child(2) {
        color: orange;
      }
      .el-button {
        background-color: black;
        border: black 1px solid;
        border-radius: 18px;
        width: 80px;
        height: 35px;
      }
    }
    .Withdrawal {
      float: left;
      width: 100px;
      // height: 210px;
      font-size: 20px;
      font-weight: 900;
      margin-left: 20px;
      p:nth-child(1) {
        margin-bottom: 40px;
      }
    }
  }
  .down_fin {
    width: auto;
    // height: 500px;
    // border: 1px solid black;
    margin-left: 40px;
    .header {
      height: 80px;
      // border: black 1px solid;
      .tab-tilte {
        div:nth-child(1) {
          float: left;
          width: 100px;
          height: 50px;
          line-height: 50px;
          margin-left: -40px;
          font-weight: 900;
          &:hover {
            border-bottom: 4px solid #213dc0;
            color: #213dc0;
            cursor: pointer;
          }
        }
        div:nth-child(2) {
          float: left;
          width: 100px;
          height: 50px;
          line-height: 50px;
          font-weight: 900;
          &:hover {
            border-bottom: 4px solid #213dc0;
            color: #213dc0;
            cursor: pointer;
          }
        }
      }
    }
    
  }
}
</style>